<template>
  <div class="home">
    <div class="card-container">
      <card
        v-for="card in cardData"
        :data="card"
        :key="card.id"
        class="card"
      ></card>
    </div>

    <line-cart title="数据统计" :legend='["订单数据", "金额数据"]' :options="options"></line-cart>
  </div>
</template>

<script>
// 引入组件
import Card from "./Card.vue";
import LineCart from '@/components/echarts/LineCart.vue'

// 引入ajax工具函数
import {getHomeChart} from '@/api/echarts'

// 引入echarts的方法  init
import { init } from "echarts";
// import * as echarts from 'echarts';

export default {
   components: {
    Card,
    LineCart
  },
  data() {
    return {
      // 图表传入数据
      options: {
        xData: [],
        yData: []
      },
      cardData: [
        {
          id: 1,
          iconColor: "#1296db",
          icon: "icon-order1",
          title: "总订单",
          num: 10666,
        },
        {
          id: 2,
          iconColor: "#d4237a",
          icon: "icon-money",
          title: "总销售额",
          num: 25687,
        },
        {
          id: 3,
          iconColor: "#1296db",
          icon: "icon-order2",
          title: "今日订单数",
          num: 78954,
        },
        {
          id: 4,
          iconColor: "#1afa29",
          icon: "icon-money1",
          title: "今日销售额",
          num: 784257,
        },
      ],
    };
  },
  methods: {
    async getChartData() {
      try {
        let res = await getHomeChart();
        let {data} = res
        this.options.xData = data.xData
        this.options.yData = [data.amountData, data.orderData]

      }catch(err) {
        console.log(err)
      }

    }
  },
  created() {
    this.getChartData()
  }
  

 
};
</script>

<style lang="less" scoped>
.home {
  .card-container {
    display: flex;
  }



  @media screen and (max-width: 800px) {
    .card-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .card-container .card {
      width: 45%;
      margin-right: 0;
      margin-bottom: 20px;
    }
  }
}
</style>